<ion-header no-border align-title="center">

  <ion-navbar color="primary">
    <ion-title mode="ios">收租</ion-title>

    <ion-buttons end class="empty-button">
      <button ion-button >
        <ion-icon></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <div class="address">
    <ion-icon name="pin">
      <span>{{build_address}} - {{room_name}}</span>
    </ion-icon>
  </div>

  <form [formGroup]="settlementForm">
    <ion-list>
      <ion-item>
        <ion-label color="primary" fixed>月份：</ion-label>
        <ion-datetime pickerFormat="YYYY MM" displayFormat="YYYY-MM" formControlName="settlement_month" min="{{check_in_date}}" max="{{check_out_date}}" cancelText="取消" doneText="确认"></ion-datetime>
      </ion-item>
      <ion-item>
        <ion-label color="primary" fixed>电表读数：</ion-label>
        <ion-input type="number" formControlName="settlement_electricity"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label color="primary" fixed>水表读数：</ion-label>
        <ion-input type="number" formControlName="settlement_water"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label color="primary" fixed>附加金额：</ion-label>
        <ion-input type="number" formControlName="settlement_additional_amount"></ion-input>
      </ion-item>
      <ion-item>
        <ion-textarea placeholder="备注" formControlName="settlement_remark"></ion-textarea>
      </ion-item>
    </ion-list>
    <ion-grid text-center>
      <ion-row>
        <ion-col>
          <button ion-button class="button-full" (click)="save(settlementForm.value, $event)" [disabled]="!settlementForm.valid">保存</button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-content>
